 <template>
 <!--轮播图 begin-->
 <div style="padding:10px 20px;" class="overflowY">
   <div style="width: 100%;height: 300px;background-color: #F2F2F2;padding-top: 12px;">
     <el-row :gutter="20">
       <el-col :span="12" :offset="6">
         <div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;">
           <base-card title="图片新闻">
             <el-carousel trigger="click" height="226px">
               <el-carousel-item v-for="item in bannerArr" :key="item">
                 <img :src="item" alt="" style="width: 100%;height: 100%;">
               </el-carousel-item>
             </el-carousel>
           </base-card>
         </div>
       </el-col>
     </el-row>
   </div>
   <base-card title="说明">
     <code>
       <span style="width: 100%;display: inline-block;">最外层 div 上的margin、padding控制div的外边距和内边距，四个值分别为上、右、下、左</span>
     </code>
   </base-card>
   <base-card title="HTML">
     <div v-html="bannerBox">{{bannerBox}}</div>
   </base-card>
   <base-card title="JS">
     <pre><code>import banner1 from '@/assets/images/myImg/banner1.jpg'<br>import banner2 from '@/assets/images/myImg/banner2.jpg'<br>import banner3 from '@/assets/images/myImg/banner3.jpg'<br>import banner4 from '@/assets/images/myImg/banner4.jpg'<br>import BaseCard from '@/components/BaseCard/BaseCard'<br>export default {<br>  data() {<br>    return {<br>      bannerArr: [banner1, banner2, banner3, banner4],<br>      banner1,<br>      banner2,<br>      banner3,<br>      banner4<br>    }<br>  },<br>  components: {<br>    BaseCard<br>  }<br>}</code></pre>

   </base-card>
 </div>
 <!--轮播图 end-->
</template>

<script>
import banner1 from '@/assets/images/myImg/banner1.jpg'
import banner2 from '@/assets/images/myImg/banner2.jpg'
import banner3 from '@/assets/images/myImg/banner3.jpg'
import banner4 from '@/assets/images/myImg/banner4.jpg'
import BaseCard from '@/components/BaseCard/BaseCard'
export default {
  data() {
    return {
      bannerBox: '<pre><code>  &lt;div style="padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;"&gt;<br>       &lt;base-card title="图片新闻"&gt;<br>          &lt;el-carousel trigger="click" height="226px"&gt;<br>             &lt;el-carousel-item v-for="item in bannerArr" :key="item"&gt;<br>                &lt;img :src="item" alt="" style="width: 100%;height: 100%;"&gt;<br>             &lt;/el-carousel-item&gt;<br>          &lt;/el-carousel&gt;<br>       &lt;/base-card&gt;<br>   &lt;/div&gt;</code></pre>',
      bannerArr: [banner1, banner2, banner3, banner4],
      banner1,
      banner2,
      banner3,
      banner4
    }
  },
  components: {
    BaseCard
  }
}
</script>

